<template>
  <div id="dashboard">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"  />
    </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" />
    <van-tabbar v-model="active" active-color="#75a342">
        <van-tabbar-item replace to="/dashboard/home">
            <span>首页</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? home_icon.active : home_icon.normal"
            >
        </van-tabbar-item>
        <van-tabbar-item to="/dashboard/category" >
            <span>分类</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? category_icon.active : category_icon.normal"
            >
        </van-tabbar-item>
        <van-tabbar-item to="/dashboard/cart" :info="goodsNum >0 ? goodsNum : 0" >
            <span>购物车</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? cart_icon.active : cart_icon.normal"
            >
        </van-tabbar-item>
        <van-tabbar-item to="/dashboard/mine">
            <span>我的</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? mine_icon.active : mine_icon.normal"
            >
        </van-tabbar-item>
</van-tabbar>
    
  </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex'
import {getGoodsCart} from './../../server/api/index';
export default {
    name:'Dashboard',
    data() {
    return {
      active: Number(sessionStorage.getItem('tabBarActiveIndex')) || 0,
      home_icon: {
        normal: require('@/images/tabbar/home_default.png'),
        active: require('@/images/tabbar/home_selected.png')
      },
      category_icon: {
        normal: require('@/images/tabbar/category_default.png'),
        active: require('@/images/tabbar/category_selected.png')
      },
      cart_icon: {
        normal: require('@/images/tabbar/shoppingcart_default.png'),
        active: require('@/images/tabbar/shoppingcart_selected.png')
      },
      mine_icon: {
        normal: require('@/images/tabbar/mine_default.png'),
        active: require('@/images/tabbar/mine_selected.png')
      },
    }
  },
  watch:{
    active(value){
       // console.log(value);
        let tabBarActiveIndex = value > 0 ? value : 0;
        // 缓存到本地
        sessionStorage.setItem('tabBarActiveIndex', value);
    }
  },
  mounted(){
    // 1.自动登录
    this.reqUserInfo();
    this.INIT_SHOP_CART();
  },
  computed:{
    ...mapState(['shopCart','userInfo']),
    goodsNum(){
      if(this.shopCart){
        // 总的购物车商品数量
        let num = 0;
        Object.values(this.shopCart).forEach((goods,index)=>{
          num += goods.num;
        })
        return num;
      }else{
        return 0;
      }
    }
  },
  methods:{
    ...mapMutations(['INIT_SHOP_CART']),
    ...mapActions(['reqUserInfo']),
    async initShopCart(){
      if (this.userInfo.token) {
        // 1 . 获取当前用户购物车中的商品(服务器)
        let result = await getGoodsCart(this.userInfo.token);
        console.log('resullt',result);
        if (result.success_code === 200) {
          // 更新本地数据
          let cartArr = result.data;
          let shopCart = {}
          cartArr.forEach((value)=>{
            shopCart[value.goods_id] = {
              'num':value.num,
              'id':value.goods_id,
              'name':value.goods_name,
              'small_image':value.small_image,
              'price':value.goods_price,
              'checked':true
            }
          })
        }
      }
    }
  }
}

</script>
<style scoped lang="less">
    #dashboard {
    width: 100%;
    height: 100%;
    }
</style>